<script setup lang="ts">
import { nextTick, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
type Menu = {
  category: CategoryItem;
  menu: MenuItme[];
};

type CategoryItem = {
  name: string;
};
type MenuItme = {
  name: string;
};

const list = ref<Menu[]>([]);
// const mallTop = ref<>()
const headerTop = ref(0);
const bannerTop = ref(0);
const mallTops = ref<UniNamespace.NodeInfo | UniNamespace.NodeInfo[]>([]);
const goodsId = ref("goods0");
const categoryId = ref("category0");
onLoad(() => {
  fetchList();
});

const fetchList = () => {
  for (let i = 0; i < 20; i++) {
    const category: CategoryItem = {
      name: "",
    };
    const menu: MenuItme[] = [];
    category.name = `种类${i}`;
    for (let j = 0; j < 10; j++) {
      menu.push({
        name: `种类${i}-菜品${j}`,
      });
    }
    list.value.push({
      category,
      menu,
    });
  }
  console.log(list.value);
  nextTick(() => {
    getHeaderHeight();
    getGoodsTop();
    console.log(mallTops.value, "mallTops");
  });
};

const getHeaderHeight = () => {
  const query = uni.createSelectorQuery();
  query
    .selectAll(".header")
    .boundingClientRect((res) => {
      headerTop.value = res[0].height;
    })
    .exec();
  query
    .selectAll(".banner")
    .boundingClientRect((res) => {
      bannerTop.value = res[0].height;
    })
    .exec();
};

const getGoodsTop = () => {
  mallTops.value = [];
  const query = uni.createSelectorQuery();
  query
    .selectAll(".mall_item")
    .boundingClientRect((res) => {
      mallTops.value = res;
      console.log(mallTops.value, "mallTops.value");
    })
    .exec();
};

const handleChangeMenu = (index: number) => {
  goodsId.value = `goods${index}`;
};

const scroll = (e) => {
  var num = e.detail.scrollTop;
  var ww = mallTops.value.find((v) => v.bottom - bannerTop.value >= ~~num);
  if (ww.dataset) {
    categoryId.value = ww.dataset.categoryId;
  }
};
</script>
<template>
  <view style="height: 100%;">
    <view style="min-height: 100%;">
      <view class="" style="height: 100vh;position: relative;">
        <scroll-view scroll-y style="height: 100vh;background-color: #f9f9f9;" :scroll-into-view="goodsId" @scroll="scroll">
          <view class="mall">
            <view class="header">
              {{headerTop}}
              {{bannerTop}}
            </view>
            <view class="mall_box">
              <view class="banner">banner</view>
              <view class="menu">
                <view class="category" style="width: 150rpx;position: sticky;top:200rpx;">
                  <scroll-view scroll-y :style="`height:calc(100vh - ${headerTop}px)`" :scroll-into-view="categoryId">
                    <view v-for="(item,i) in list" :key="i" class="category_item flex-center" :style="`${categoryId === `category${i}`?'background:#eee;':''}`" style="height: 100rpx;border-bottom: 1rpx solid #333;flex-shrink: 0;" @click="handleChangeMenu(i)" :id="`category${i}`">
                      {{item.category.name}}
                    </view>
                  </scroll-view>
                </view>
                <view class="goods" style="flex: 1;padding: 0 25rpx;margin-left: 150rpx;">
                  <view v-for="(item,i) in list" :key="i" class="mall_item flex flex-col" :data-category-id="`category${i}`" :id="`goods${i}`">
                    <view style="padding: 20rpx 0;">{{item.category.name}}</view>
                    <view v-for="(product,index) in item.menu" :key="index" class="flex flex-center" style="height: 100rpx;border-bottom: 1rpx solid #333;">
                      {{product.name}}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.mall {
  background-color: #fff;
}

.header {
  height: 200rpx;
  background-color: pink;
  position: sticky;
  top: 0;
  z-index: 1;
}

.banner {
  height: 200rpx;
  background-color: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
}

.category {
  position: -webkit-sticky;
  position: sticky;
  width: 150rpx;
  float: left;
}

.menu {
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}
</style>
